<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>Test dojox.grid.EnhancedGrid</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
	<style type="text/css">
		@import "../../../../dojo/resources/dojo.css";
		@import "../../../../dijit/themes/tundra/tundra.css";
		@import "../../enhanced/resources/tundraEnhancedGrid.css";
		@import "../../enhanced/resources/EnhancedGrid_rtl.css";
		body {
			font-size: 0.9em;
			font-family: Geneva, Arial, Helvetica, sans-serif;
			padding: 0.5em;
		}
		.title {
			text-align:center;
		}
		
 		#grid1, #grid2, #grid3 {
			width: 85.2em;
			height: 50em;
		}

	</style>
	<script type="text/javascript" src="../../../../dojo/dojo.js" 
		djConfig="isDebug:true, parseOnLoad: true"></script>
	<script type="text/javascript">
		dojo.require("dojox.grid.EnhancedGrid");
		dojo.require("dojox.grid.enhanced.plugins.DnD");
		dojo.require("dojox.grid.enhanced.plugins.Menu");
		dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
		dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
		dojo.require("dojox.data.CsvStore");
		dojo.require("dojo.parser");
	</script>
	<script type="text/javascript">
		var layout = [{
			defaultCell: { width: 8, editable: false, type: dojox.grid.cells._Widget },
			rows:
			[
				{ field: "Genre", width: '6'},
				{ field: "Artist", width: '10'},
				{ field: "Year", width: '6'},
				{ field: "Album", width: '12'},
				{ field: "Name", width: '17'},
				{ field: "Length", width: '6'},
				{ field: "Track", width: '6'},
				{ field: "Composer", width: '15'}				
			]}
		];

		var csvStore1 = new dojox.data.CsvStore({id:'csvStore1', url:"support/music-for-demo.part.csv"});
		
		/* Un-comment this block to see more usages
		var layout2 = [
			[
				{ field: "Genre", width: '10'},
				{ field: "Artist", width: '10'},
				{ field: "Year", width: '10'},
				{ field: "Album", width: '15'},
				{ field: "Name", width: '15'},
				{ field: "Length", width: '10'},
				{ field: "Track", width: '10'},
				{ field: "Composer", width: '10'}				
			]
		];
		dojo.addOnLoad(function(){
			var grid = new dojox.grid.EnhancedGrid({
				id: "grid3",
				store: csvStore1,
				structure: layout,
				rowSelector: '20px',
				plugins : {nestedSorting: true, dnd: true, indirectSelection: {name: "Selection", width:"70px", styles:"text-align: center;"}, menus:{headerMenu:"headerMenu", rowMenu:"rowMenu", cellMenu:"cellMenu", selectedRegionMenu:"selectedRegionMenu"}}
			}, dojo.byId('gridDiv'));
			grid.startup();
		});
		*/
	</script>
	<script type="text/javascript" src="support/test_ue.js"></script>
</head>
<body class="tundra">
	<h1 class="title">Test dojox.grid.EnhancedGrid Phase 1 Features</h1>
	<div>
		<b>EnhancedGrid phase 1 provides the following features:</b>
		<ol>
			<li>Nested Sorting</li>
			<li>Built-in support for Indirect Selection (radio buttons and check boxes)</li>
			<li>Declarative context menu</li>
			<li>Selecting rows/columns via swipe</li>
			<li>Drag-n-drop: columns,rows - MOVE</li>
		</ol>
	</div>
	
	<div>
		<b>Keyboard support:</b>
		<ol>
			<li>Use <b>TAB or SHIFT + TAB</b> to navigate keyboard focus among column headers, row headers and cell regions</li>
			<li>When focus is on column header:<br>
				<ol style="list-style: none;">
					<li> - Use <b>LEFT/RIGHT</b> to navigate keyboard focus among column headers </li>
					<li> - Use <b>SPACE</b> to choose a column or sorting choice</li>
					<li> - Use <b>SHIFT + LEFT/RIGHT</b> to select multiple columns</li>
					<li> - Use <b>CTRL + LEFT/RIGHT</b> to move columns</li>
				</ol>
			</li>
			<li>When focus is on row header or column of checkbox:<br>
				<ol style="list-style: none;">
					<li> - Use <b>UP/DOWN</b> to navigate keyboard focus among row headers </li>
					<li> - Use <b>SPACE</b> to choose a row</li>
					<li> - Use <b>SHIFT + UP/DOWN</b> to select multiple rows</li>
					<li> - Use <b>CTRL + UP/DOWN</b> to move rows</li>
				</ol>
			</li>
		</ol>
	</div>
	
	<div>
		<b>Some known issues (plan to fix in phase 2):</b>
		<ol>	
			<li>EnhancedGrid doesn't support complicated layout(e.g. multiple rows in column header), TreeGrid(SubGrid).</li>
		</ol>
	</div>
	<!--span dojoType="dojox.data.CsvStore" 
		jsId="csvStore1" url="support/music-for-demo.part.csv">
	</span-->
	<div>
		<b>
		    Multiple selection mode:
		</b>
		<div id="grid1" dojoType="dojox.grid.EnhancedGrid" query="{ Track: '*' }" rowsPerPage="30" 
			plugins='{nestedSorting: true, dnd: true, indirectSelection: true, menus:{headerMenu:"headerMenu", rowMenu:"rowMenu", cellMenu:"cellMenu", selectedRegionMenu:"selectedRegionMenu"}}'
			store="csvStore1" structure="layout" rowSelector="20px">
			<div dojoType="dijit.Menu" id="headerMenu"  style="display: none;">
				<div dojoType="dijit.MenuItem">Header Menu Item 1</div>
				<div dojoType="dijit.MenuItem">Header Menu Item 2</div>
				<div dojoType="dijit.MenuItem">Header Menu Item 3</div>
				<div dojoType="dijit.MenuItem">Header Menu Item 4</div>
			</div>
			<div dojoType="dijit.Menu" id="rowMenu"  style="display: none;">
				<div dojoType="dijit.MenuItem">Row Menu Item 1</div>
				<div dojoType="dijit.MenuItem">Row Menu Item 2</div>
				<div dojoType="dijit.MenuItem">Row Menu Item 3</div>
				<div dojoType="dijit.MenuItem">Row Menu Item 4</div>
			</div>
			<div dojoType="dijit.Menu" id="cellMenu"  style="display: none;">
				<div dojoType="dijit.MenuItem">Cell Menu Item 1</div>
				<div dojoType="dijit.MenuItem">Cell Menu Item 2</div>
				<div dojoType="dijit.MenuItem">Cell Menu Item 3</div>
				<div dojoType="dijit.MenuItem">Cell Menu Item 4</div>
			</div>
			<div dojoType="dijit.Menu" id="selectedRegionMenu"  style="display: none;">
				<div dojoType="dijit.MenuItem">Action 1 for Selected Region</div>
				<div dojoType="dijit.MenuItem">Action 2 for Selected Region</div>
				<div dojoType="dijit.MenuItem">Action 3 for Selected Region</div>
				<div dojoType="dijit.MenuItem">Action 4 for Selected Region</div>
			</div>
		</div>
		<br/>
		<input type='button' value='Select All' onclick='dijit.byId("grid1").rowSelectCell.toggleAllSelection(true)'/>
		&nbsp;&nbsp;
		<input type='button' value='Deselect All' onclick='dijit.byId("grid1").rowSelectCell.toggleAllSelection(false)'/>
	</div>
	
	<!-- Un-comment this block to see more usages
	<div id="gridDiv"></div>
	
	<div>
		<b>
		    Single selection mode:
		</b>
		<div id="grid2" dojoType="dojox.grid.EnhancedGrid" query="{ Track: '*' }" rowsPerPage="30" selectionMode="single"
			plugins='{nestedSorting: true, dnd: true, indirectSelection: {name: "Selection", width:"60px", styles:"text-align: center;"}, menus:{headerMenu:"headerMenu", rowMenu:"rowMenu", cellMenu:"cellMenu", selectedRegionMenu:"selectedRegionMenu"}}'
			store="csvStore1" structure="layout" rowSelector="20px"  
		</div>
	</div>
	-->

</body>
</html>
